<template>
  <div class="user-manage">
    <div class="query-form">
      <el-form ref="form" :inline="true">
		   <el-form-item label="年月">
		  	<el-date-picker @change="selectChangedTime" v-model="user.year_month" type="month"
		  		placeholder="选择月">
		  	</el-date-picker>
		  </el-form-item>
        <el-form-item label="名字" v-if="isAdministrator">
          <el-input v-model="user.name" placeholder="请输入名字" />
        </el-form-item>
        <el-form-item label="身份证" v-if="isAdministrator">
          <el-input v-model="user.id_number" placeholder="请输入身份证" />
        </el-form-item>
        <el-form-item label="申请工资变动原因">
          <el-input v-model="user.reason" placeholder="请输入原因" />
        </el-form-item>
        <el-form-item label="审核状态">
          <el-select v-model="user.state">
            <el-option :value="1" label="待审核"></el-option>
            <el-option :value="2" label="审核通过"></el-option>
            <el-option :value="3" label="审核不通过"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery">查询</el-button>
          <el-button @click="handleReset('form')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="base-table">
      <div class="action">
         <el-button type="primary" @click="handleCreate"
          >新增</el-button
        >
<!--        <el-button-->
<!--          type="danger"-->
<!--          @click="handlePatchDel"-->
<!--          v-has="'user-patch-delete'"-->
<!--          >批量删除</el-button-->
<!--        >-->
      </div>
      <el-table :data="userList" @selection-change="handleSelectionChange">
        <!-- <el-table-column type="selection" width="55" /> -->
        <el-table-column
          v-for="item in columns"
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :formatter="item.formatter"
        >
        </el-table-column>
        <el-table-column label="操作" width="250">
          <template #default="scope">
            <el-button v-if="!isAdministrator"
                @click="handleEdit(scope.row)"
                size="mini"

            >编辑</el-button>
            <el-button v-if="isAdministrator"
              @click="handleState(scope.row)"
              size="mini" >审核</el-button  >
             <el-button v-if="!isAdministrator"
              type="danger"
              size="mini"
              @click="handleDel(scope.row)"

              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pagination"
        background
        layout="prev, pager, next"
        :total="pager.total"
        :page-size="pager.pageSize"
        @current-change="handleCurrentChange"
      />
    </div>
    <el-dialog title="操作页面" v-model="showModal">
      <el-form
        ref="dialogForm"
        :model="userForm"
        label-width="100px"
        :rules="rules"
      >
        <el-form-item label="年月" v-if="action ==  'add'">
          <el-date-picker @change="selectChangedTime" v-model="user.year_month" type="month"
                          placeholder="选择月">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="变动原因" v-if="action ==  'add'">
        		<el-input type="textarea" v-model="user.reasonEd"></el-input>
        </el-form-item>
        <el-form-item label="审核状态" v-if="action ==  'state'">
            <el-select v-model="user.state">
              <el-option :value="1" label="待审核"></el-option>
              <el-option :value="2" label="审核通过"></el-option>
              <el-option :value="3" label="审核不通过"></el-option>
            </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="handleSubmit">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import { getCurrentInstance, onMounted, reactive, ref, toRaw } from "vue";
import utils from "../utils/utils";
export default {
  data() {
    return {
      userInfo: this.$store.state.userInfo,
      columns: [
        {
          label: "类型ID",
          prop: "id",
          value: ""
        },
        {
          label: "名称",
          prop: "name",
        },
        {
          label: "工号",
          prop: "idNumber",
          value: ""
        },
        {
          label: "年月",
          prop: "yearMonths",
          value: ""
        },
        {
          label: "变动原因",
          prop: "reason",
          value: ""
        },
        {
          label: "审核状态",
          prop: "state",
          formatter(row, column, value) {
            return {
              1: "待审核",
              2: "审核通过",
              3: "审核不通过",
            }[value];
          },
        },
        {
          label: "创建时间",
          prop: "createTime",
          value: ""
        }
      ],
      userList: [],
      user: {
        id:"",
        year_month:"",
        id_number:"",
        name:"",
        reason:"",
        reasonEd:"",
        state:1
      },
      pager: {
        page: 1,
        pageSize: 10,
      },
      userForm: {},
      showModal: false,
      action:"add",
      isAdministrator:false
    }
  },

  created() {
    this.getUserList();
  },
  methods: {
    // 获取用户列表
    async getUserList() {
      if(this.userInfo.name.indexOf("管理员")){
        this.isAdministrator = true;
      }else{
        this.id_number = this.userInfo.id_number;
      }
      let users = this.user;
      let pagers = this.pager;
      let params = {
        ...users,
        ...pagers
      };
      try {
        const list = await this.$api.FindAllSalaryApply(params); //getUserList
        if(list == null){
          this.userList = [];
          this.pager.total = 0;
        }else{
          this.userList = list.rows;
          this.pager.total = list.records;
        }
      } catch (error) {}
    },
    //  查询事件，获取用户列表
    handleQuery(){
      this.getUserList();
    },
    // // 重置查询表单
    handleReset(form) {
      if(this.isAdministrator){
        this.user.id_number = '';
      }
      this.user.id = "";
      this.user.year_month = '';
      this.user.name = '';
      this.user.reason = '';
      this.user.reasonEd = '';
    },
    // 用户新增
    handleCreate(){
      this.action = "add";
      this.showModal = true;
      this.handleReset("dialogForm");
    },
    handleClose(){
      this.showModal = false;
      this.handleReset("dialogForm");
    },
    // 用户提交
    async handleSubmit(){
      if(this.user.year_month == ""){
        this.$message.error("请选择年月");
      }
      if(this.user.reasonEd == ""){
        this.$message.error("请输入变动原因");
      }
      this.user.reason = this.user.reasonEd;
      const list = await this.$api.AddApply(this.user); //getUserList
      if(list == -5){
        this.$message.error("增加/修改失败");
        return;
      }else{
        this.$message.success("增加成功");
      }
      this.showModal = false;
      this.handleReset("dialogForm");
      this.getUserList();
    },
    selectChangedTime(val) {
      if (val == null) {
        return;
      }
      if(val.getMonth() < 10){
        let month = val.getMonth() + 1;
        this.user.year_month = val.getFullYear() + "-0"+month
      }else{
        let month = val.getMonth() + 1;
        this.user.year_month = val.getFullYear() + "-"+month
      }
    },
    // 用户编辑
    handleEdit(row){
      debugger
      this.user.id = row.id;
      this.action = "add";
      this.showModal = true;
      this.user.reasonEd = row.reason;
      this.user.year_month = row.yearMonths;
    },
    // 用户审核
    handleState(row){
      debugger
      this.user.id = row.id;
      this.action = "state";
      this.showModal = true;
    },
    // 用户单个删除
    async handleDel(row){
      this.user.id = row.id;
      await this.$api.userDelSalaryApply(this.user);
      this.$message.success("删除成功");
      this.getUserList();
    },
    // 分页事件处理
    async handleCurrentChange(current){
      this.pager.page = current;
      this.getUserList();
    }
  }
}
</script>

<style lang="scss">
.el-textarea__inner{
  height: 150px;
  overflow-y: auto;
  /* overflow-y: auto;兼容ie  */
}
</style>
